<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - OL4加载天地图WMTS服务展示地图</title>
    <script src="../lib/ol4/ol4.js"></script>
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="map"></div>
</body>
<script>
    const projection = ol.proj.get('EPSG:3857');
    // projection.setExtent([1.2682219650487367E7,2581173.3618581947,1.2685934934483506E7,2583422.9580371343]);
    const tileSize = 256;
    const projectionExtent = projection.getExtent();
    const origins = [
        [1.2682219650487367E7, 2583422.9580371343],
        ol.extent.getTopLeft(projectionExtent)
    ];
    const origin = origins[0];
    console.log('origin:', origin);
    console.log(projectionExtent);

    const size = ol.extent.getWidth(projectionExtent) / tileSize;

    const resolutions = [19.109257071294056, 9.554628535647028, 4.777314267823514, 2.388657133911757, 1.1943285669558785, 0.5971642834779393, 0.29858214173896963, 0.14929107086948482, 0.07464553543474241];
    const matrixIds = [0, 1, 2, 3, 4, 5, 6, 7, 8];
    console.log(resolutions);

    const tileGrid = new ol.tilegrid.WMTS({
        origin,
        resolutions: resolutions,
        extent: projectionExtent,
        matrixIds: matrixIds
    });

    // const url = `http://t0.tianditu.gov.cn/vec_w/wmts?tk=a6bf5a2496115f58481b947040c83ae3`;
    const url = `http://gis.szpt.edu.cn/iserver/services/map-ugcv5-szymap/wmts100`;

    const wmtsSource = new ol.source.WMTS({
        url,
        layer: 'szymap',
        matrixSet: 'Custom_szymap',
        format: 'image/png',
        projection: projection,
        tileGrid: tileGrid,
        style: 'default',
        wrapX: false
    });
    // 图层
    const baseLayer = new ol.layer.Tile({
        source: wmtsSource
    });

    // 113.93860280513788,22.583052557581013
    // const circlePoint = ol.proj.transform([116.384722, 39.889916], 'EPSG:4326', 'EPSG:3857');
    const circlePoint = ol.proj.transform([12683587.245965,2581673.170782078207820782], 'EPSG:3857', 'EPSG:4326');
    console.log(circlePoint);

    const points = [
        [0, 0],
        [12684077.292485436, 2582298.1599476645]
    ];
    const centerPoint = points[1];

    const iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(centerPoint)
    });

    const iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [10, 26],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            src: '../image/position_orange.png'
        })
    });

    iconFeature.setStyle(iconStyle);

    const vectorSource = new ol.source.Vector({
        features: [iconFeature],
        wrapX: false
    });

    const iconLayer = new ol.layer.Vector({
        source: vectorSource
    });

    const map = new ol.Map({
        layers: [
            baseLayer,
            iconLayer
        ],
        target: 'map',
        view: new ol.View({
            center: centerPoint,
            projection,
            zoom: 5,
            maxZoom: 9,
            minZoom: 1,
            resolutions
        })
    });
</script>
</html>